<template>
    <div>
        <a-modal v-model:open="modalOpen" :title="title" width="50%" :footer="null" @cancel="handleCancel">
            <a-space direction="vertical" style="width: 100%" :size="16">
                <a-form :model="formData" ref="formRef" :rules="rules" labelAlign="left" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                    <a-form-item label="特权名称" name="name">
                        <a-input v-model:value="formData.name" placeholder="输入特权名称" />
                    </a-form-item>
                    <a-form-item label="特权描述" name="describes">
                        <a-textarea v-model:value="formData.describes" placeholder="输入特权描述" />
                    </a-form-item>
                    <a-form-item label="特权图标" name="coverPic" ref="uploadImg">
                        <div class="img-item">
                            <a-upload 
                                name="avatar" 
                                accept=".jpg,.png,.jpeg" 
                                list-type="picture-card" 
                                class="avatar-uploader" 
                                :show-upload-list="false"
                                :action="null"
                                :before-upload="(file,fileList) => beforeUpload(file,fileList,'coverPic')"
                                @change="handleChange">
                                <a-image style="width: 102px; height: 102px" v-if="formData.coverPic" :src="formData.coverPic" alt="avatar" />
                                <div v-else>
                                    <loading-outlined v-if="loading"></loading-outlined>
                                    <plus-outlined v-else></plus-outlined>
                                </div>
                            </a-upload>
                            <div class="img-label">仅支持上传.jpg.png格式</div>
                        </div>
                    </a-form-item>
                    <a-form-item label="特权介绍图" name="introImg" ref="uploadImg2">
                        <div class="img-item">
                            <a-upload 
                                name="avatar" 
                                accept=".jpg,.png,.jpeg" 
                                list-type="picture-card" 
                                class="avatar-uploader" 
                                :show-upload-list="false"
                                action="#" 
                                :before-upload="(file,fileList) => beforeUpload(file,fileList,'introImg')"
                                @change="handleChange">
                                <a-image style="width: 102px; height: 102px" v-if="formData.introImg" :src="formData.introImg" alt="avatar" />
                                <div v-else>
                                    <loading-outlined v-if="loading2"></loading-outlined>
                                    <plus-outlined v-else></plus-outlined>
                                </div>
                            </a-upload>
                            <div class="img-label">仅支持上传.jpg.png格式</div>
                        </div>
                    </a-form-item>
                    <a-form-item label="特权简介" name="introduction">
                        <a-textarea v-model:value="formData.introduction" placeholder="输入特权描述" />
                    </a-form-item>
                    <a-form-item label="展示排序" name="sort">
                        <a-input type="number" v-model:value="formData.sort" placeholder="输入序号" />
                    </a-form-item>
                    <a-form-item label="特权类型" name="type">
                        <a-select ref="select" v-model:value="formData.type" placeholder="请选择特权类型">
                            <a-select-option v-for="item in memberEquitiesState.data" :key="item.value" :value="item.value" >{{ item.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="次数/倍数" name="num">
                        <a-input type="number" :disabled="numValue.disabled" v-model:value="formData.num" :placeholder="numValue.placeholder" />
                    </a-form-item>
                    <a-form-item label="状态" name="state">
                        <a-select ref="select" v-model:value="formData.state" placeholder="请选择会员状态">
                            <a-select-option :value="1">启用</a-select-option>
                            <a-select-option :value="2">禁用</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-form>
                <div class="modal-but-layout">
                    <a-space wrap>
                        <a-popconfirm title="您是否要数据重置?" ok-text="是" cancel-text="否" @confirm="confirm">
                            <a-button>重置</a-button>
                        </a-popconfirm>
                        <a-button type="primary" @click="handleSubmit">提交</a-button>
                    </a-space>
                </div>
            </a-space>
        </a-modal>
    </div>
</template>
<script setup>
import { ref,watch } from 'vue'
import { saveVipRights } from '@/api/member'
import memberEquitiesState from "@/enums/memberEquitiesState.js"
import { message } from 'ant-design-vue'
import { singleUploadsFile } from "@/api/upload";
const emit = defineEmits(['queryVipRightsList'])
const fileSpecification = {
    type:['image/png','image/jpg','image/jpeg'],
    // size:
}
const modalOpen = ref(false)
const formRef = ref(null)
const formData = ref({
    id:null,
    name: undefined,
    describes: undefined,
    coverPic: undefined,
    introImg: undefined,
    sort: undefined,
    status: 1,
    introduction:undefined,
    type:undefined,
    num:undefined
})
// 次数/倍数输入框状态
const numValue = ref({
    disabled:true,
    placeholder:'暂无'
})
const rules = ref({
    name: [{ required: true, message: '输入特权名称' }],
    describes: [{ required: true, message: '输入特权描述' }],
    coverPic: [{ required: true, message: '请上传特权图标' }],
    introImg: [{ required: true, message: '请上传特权介绍图' }],
    sort: [{ required: true, message: '请输入序号' }],
    state: [{ required: true, message: '请选择会员状态' }],
    introduction: [{ required: true, message: '输入特权简介' }],
    type: [{ required: true, message: '请选择特权类型' }],
})
const title = ref('会员特权配置')
const open = (item) => {
    console.log('item',item);
    modalOpen.value = true
    if(item){
        formData.value.id = item.id
        formData.value.name = item.name
        formData.value.describes = item.describes
        formData.value.coverPic = item.coverPic
        formData.value.introImg = item.introImg
        formData.value.sort = item.sort
        formData.value.state = item.state
        formData.value.introduction = item.introduction
        formData.value.type = item.type
    }
    if (item?.type != 0) formData.value.num = item?.num
}
const loading = ref(false)
const loading2 = ref(false)
const uploadImg = ref(null)
const uploadImg2 = ref(null)
const beforeUpload = (file,fileList,a) => {
    // 条件判断 格式及尺寸
    if (!fileSpecification.type.includes(file.type)) {
        message.info('请上传要求的图片格式')
        return false
    }
    loading.value = true
    let formState = new FormData()
    formState.append('file', file)
    formState.append('type', '1')
    singleUploadsFile(formState).then((res) => {
        // console.log('上传结果',res);
        if (res.code == 200) {
            loading.value = false;
            formData.value[a] = res.data;
            if(a === 'coverPic'){
                uploadImg.value.clearValidate();
            }else{
                uploadImg2.value.clearValidate();
            }
            
        }
    });
    
    return false

    //判断是否小于20M
    // let isLt20M = file.size < 1024 * 1024 * 20;
    // if (!isLt20M) {
    //     //将fileList中本次file文件删掉
    //     fileList.splice(fileList.indexOf(file), 1);
    //     message.error("所选文件单个超过20M，已自动过滤，请检查~");
    // }
    // return false;
}
const handleChange = (file) => {
    console.log('handleChange',file);
    // loading.value = true
    // let formState = new FormData()
    // formState.append('file', file.file)
    // formState.append('type', '1')
    //   singleUploadsFile(formState).then((res) => {
    //     if (res.code == 200) {
    //       loading.value = false;
    //       formData.value.img = res.data;
    //       uploadImg.value.clearValidate();
    //     }
    //   });
}
// 提交

const handleSubmit = async (res) => {
    formRef.value.validate().then(async (res) => {
        if(!formData.value.num) formData.value.num = 0
        const data = await saveVipRights(formData.value)
        console.log('res',data);
        if(data.code === 200) {
            emit('queryVipRightsList')
            modalOpen.value = false
            confirm()
            if(formData.value.id){
                message.info('编辑成功')
            }else{
                message.info('新增成功')
            }
        }
    })
}
//重置
const confirm = () => {
    formData.value = {
        name: undefined,
        describes: undefined,
        coverPic: undefined,
        introImg: undefined,
        sort: undefined,
        status: 1,
        introduction:undefined,
        type:undefined,
        num:undefined
    }
    numValue.value = {
        disabled:true,
        placeholder:'暂无'
    }
    formRef.value.clearValidate()
}
//关闭弹框
const handleCancel = () => {
    confirm()
}
// 监听type值改变
watch(
    () => formData.value.type,
    (newType) => {
        console.log(`newNum is: ${newType}`)
        if (newType == 0) {
            numValue.value.disabled = true
            numValue.value.placeholder = '暂无'
            formData.value.num = undefined
            delete rules.value.num
            formRef.value.clearValidate('num')
        }else{
            numValue.value.disabled = false
            numValue.value.placeholder = '请输入次数/倍数'
            rules.value.num = [{ required: true, message: '请输入次数/倍数' }]
        }
    }
)
defineExpose({ modalOpen, open })
</script>
<style lang="scss" scoped></style>